<template>
    <div>
        <!--头部-->
        <header class="publicHeader">
            <h1>724便利店管理系统</h1>
            <div class="publicHeaderR">
                <p><span style="color: #fff21b"> {{ name }}</span> , 欢迎光临！</p>
                <a @click="handleLogout">登出</a>
            </div>
        </header>
        <!--时间-->
        <section class="publicTime">
            <span id="time">2019年1月1日 11:11  星期一</span>
            <a href="#">为了保证正常使用，请使用IE10.0以上版本！</a>
        </section>

    </div>
</template>

<script>
import {mapState} from "vuex";

export default {
    name: "CvsHeader",
    data() {
        return {
            token: ''
        }
    },
    // 计算属性
    computed: {
        ...mapState([
            'name', 'token'
        ])
    },
    methods: {
        handleLogout() {
            // 调用vuex中的action完成退出登录
            this.$store.dispatch('logout')
            // 成功后跳转登录页面
            this.$router.push(`/?redirect=${this.$route.fullPath}`)
        },
    }
}
</script>

<style scoped>
/*公共样式，头部*/
.publicHeader {
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    background: linear-gradient(to bottom, #60acf0, #64a5df, #62a0dd, #5994d6, #4f8ace, #4880ca);
    background: -webkit-linear-gradient(to bottom, #60acf0, #64a5df, #62a0dd, #5994d6, #4f8ace, #4880ca);
    background: -moz-linear-gradient(to bottom, #60acf0, #64a5df, #62a0dd, #5994d6, #4f8ace, #4880ca);
    background: -ms-linear-gradient(to bottom, #60acf0, #64a5df, #62a0dd, #5994d6, #4f8ace, #4880ca);
}

.publicHeader h1 {
    float: left;
    color: #fff;
    font-size: 22px;
    padding-left: 80px;
    text-shadow: 2px 1px #000;
    background: url("~@/assets/image/buy.png") 30px center no-repeat;

}

.publicHeaderR {
    float: right;
    color: #fff;
    margin-right: 50px;

}

.publicHeaderR p {
    display: inline-block;
    font-weight: bold;
}

.publicHeaderR a {
    width: 50px;
    height: 28px;
    display: inline-block;
    border: 1px solid #679e43;
    background: linear-gradient(to bottom, #baf076, #a2d866, #9cd055, #8dc838, #8bc93a);
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;

}

.publicHeaderR a:hover, .publicHeaderR a:active {
    border: 1px solid #192b02;
    border-radius: 4px;
    font-weight: bold;
    background: linear-gradient(to bottom, #70b21c, #5c9613, #47740e, #3b6209, #2b4906);
}

/*时间*/
.publicTime {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    background: linear-gradient(to bottom, #f5f9f8, #eef2fb, #e2ecf5, #e2ecf5, #e0edf6);
    padding-left: 20px;
    color: #808589;
}

#time {
    float: left;
    background: url("@/assets/image/time.png") 0 center no-repeat;
    padding-left: 26px;
}

.publicTime a {
    float: right;
    margin-right: 50px;
    color: #626367;
}

</style>
